import React from 'react';
import {TimePicker,Select,Button, Input, Spin, DatePicker,Icon,TreeSelect,Modal,message} from 'antd';
import styles from './AddItem.less';
import {VtxModalList, VtxModal, VtxDatePicker, VtxSearchMap} from 'vtx-ui';
import {NAME_SPACE, AddForm, hospitalList} from './config'

const Option = Select.Option;

class Index extends React.Component{
  constructor(props){
    super(props)
    this.hideHandle = this.hideHandle.bind(this)
    this.submitHandle = this.submitHandle.bind(this)
    this.valueChange = this.valueChange.bind(this)
    this.lis = null
  };
  hideHandle(){
    const {dispatch} = this.props 
    dispatch({
      type: `${NAME_SPACE}/updateState`,
      payload: {
        addModelVisable: false,
      }
    })
  };
  submitHandle(){
    const {dispatch, modifyId, addForm} = this.props;
    this.lis.submit().then(res => {
      if (res) {
        if (modifyId) {
          dispatch({
              type: `${NAME_SPACE}/_modify`,
              payload: {},
          })
        } else {
          dispatch({
              type: `${NAME_SPACE}/add`,
              payload: {}
          })
          dispatch({
            type: `${NAME_SPACE}/updateState`,
            payload: {
              addModelVisable: false
            }
          })
        }
      }
    });       
  };
  valueChange(name, value){
    const {dispatch} = this.props
    dispatch({
      type: `${NAME_SPACE}/updateSubState`,
      payload: {
        sub: 'addForm',
        data: {
          [name]: value
        }
      }
    })
  };
  render(){ 
    const {dispatch, addModelVisable, addForm, goMap, modifyId, addLoading, points} = this.props

    const {
      // 联系人
      contacts,
      longitude,
      latitude,
      // 医疗机构地址
      hospitalAddress,
      // 医疗机构名称
      hospitalName,
      // 医疗机构类型
      hospitalType,
      // 小程序账号
      userName,
      // 小程序密码
      password,
      // 联系电话
      phone,
      // 账号状态
      status,
    } = addForm

    const modalProps = {
      footer: [
        <Button key="back" onClick={this.hideHandle}>取消</Button>,
        <Button key="ok" type="primary" loading={addLoading} onClick={this.submitHandle}>确定</Button>,
      ],
      onCancel: this.hideHandle,
      onOk: this.submitHandle,
      maskClosable: false,
      title:modifyId? '修改' : '新增',
      visible: addModelVisable,
      width: 600,
    }
    return(
      <div>
        <VtxModal {...modalProps}>
          <div>
            <VtxModalList
              ref={(lis) => {this.lis = lis}}
              visible={addModelVisable}
              isRequired={true}
            >
              <Input
                value = {hospitalName}
                onChange={(e) =>{
                    this.valueChange("hospitalName", e.target.value)
                }}
                data-modallist={{
                  layout: {
                    width: 50,
                    name: '医疗机构名称',
                    require: true,
                    className:'disModalListText'
                  },
                  regexp: {
                    value: hospitalName,
                  }
                }}
              />
              <Select
                value = {hospitalType}
                onChange={(value) =>{
                    this.valueChange("hospitalType", value)
                }}
                data-modallist={{
                  layout: {
                    width: 50,
                    name: '类型',
                    require: true,
                    className:'disModalListText'
                  },
                  regexp: {
                    value: hospitalType,
                  }
                }}
              >
                {
                  Array.isArray(hospitalList)?
                    hospitalList.map((item, index) => {
                      return(<Option value={item.id}>{item.name}</Option>)
                    })
                  :''
                }
              </Select>
              <Input
                value = {contacts}
                onChange={(e) =>{
                    this.valueChange("contacts", e.target.value)
                }}
                data-modallist={{
                  layout: {
                    width: 50,
                    name: '联系人',
                    require: false,
                    className:'disModalListText'
                  },
                  regexp: {
                    value: contacts,
                  }
                }}
              />
              <Input
                value = {phone}
                onChange={(e) =>{
                    this.valueChange("phone", e.target.value)
                }}
                data-modallist={{
                  layout: {
                    width: 50,
                    name: '手机号',
                    require: false,
                    className:'disModalListText'
                  },
                  regexp: {
                    value: phone,
                    exp: /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/
                  }
                }}
              />
              <Input
                value = {hospitalAddress}
                onChange={(e) =>{
                    this.valueChange("hospitalAddress", e.target.value)
                }}
                data-modallist={{
                  layout: {
                    width: 100,
                    name: '医疗机构地址',
                    require: true,
                    className:'disModalListText'
                  },
                  regexp: {
                    value: hospitalAddress,
                  }
                }}
              />
               <Input
                value = {userName}
                onChange={(e) =>{
                    this.valueChange("userName", e.target.value)
                }}
                // disabled={modifyId? true : false}
                data-modallist={{
                  layout: {
                    width: 50,
                    name: '小程序账号名称',
                    require: true,
                    className:'disModalListText'
                  },
                  regexp: {
                    value: userName,
                  }
                }}
              />
              <Input
                value = {password}
                onChange={(e) =>{
                    this.valueChange("password", e.target.value)
                }}
                // disabled={modifyId? true : false}
                data-modallist={{
                  layout: {
                    width: 50,
                    name: '小程序账号密码',
                    require: true,
                    className:'disModalListText'
                  },
                  regexp: {
                    value: password,
                  }
                }}
              />
              <Select
                value = {status}
                onChange={(value) =>{
                    this.valueChange("status", value)
                }}
                data-modallist={{
                  layout: {
                    width: 50,
                    name: '账号状态',
                    require: true,
                    className:'disModalListText'
                  },
                  regexp: {
                    value: status,
                  }
                }}
              >
                <Option value={1}>冻结</Option>
                <Option value={2}>正常</Option>
              </Select>
              <Input
                value = {longitude}
                onChange={(e) =>{
                    this.valueChange("longitude", e.target.value)
                }}
                disabled
                data-modallist={{
                  layout: {
                    width: 50,
                    name: '经度',
                    require: true,
                    className:'disModalListText'
                  },
                  regexp: {
                    value: longitude,
                    exp: /^[\-\+]?(0(\.\d{1,10})?|([1-9](\d)?)(\.\d{1,10})?|1[0-7]\d{1}(\.\d{1,10})?|180\.0{1,10})$/,
                  }
                }}
              />
              <Input
                value = {latitude}
                onChange={(e) =>{
                    this.valueChange("latitude", e.target.value)
                }}
                disabled
                data-modallist={{
                  layout: {
                    width: 50,
                    name: '纬度',
                    require: true,
                    className:'disModalListText'
                  },
                  regexp: {
                    value: latitude,
                    exp: /^[\-\+]?((0|([1-8]\d?))(\.\d{1,10})?|90(\.0{1,10})?)$/,
                  }
                }}
              />
              
              <Button style={{width:"15%",marginLeft:"5%"}} type="primary" onClick={goMap}>地图</Button>
            </VtxModalList>
          </div>
        </VtxModal>
      </div>
    )
  }
}
export default Index